<template>
    <el-row>
      <el-col :span="24">
        <div class="user-info">
          <div class="user-info-left">
            <user-avater :avater-src="userInfoData.avatersrc"></user-avater>
            <p>注册时间：{{userInfoData.regtime}}</p>
            <p>最近一次登陆时间：{{userInfoData.lastlogin}}</p>
          </div>
          <div class="user-info-right">
            <el-row>
              <el-col :span="9">
                <span>姓名：</span>
                <span>{{userInfoData.name}}</span>
              </el-col>
              <el-col :span="9">
                <span>身高：</span>
                <span>{{userInfoData.height}}cm</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="9">
                <span>性别：</span>
                <span>{{userInfoData.sex}}</span>
              </el-col>
              <el-col :span="9">
                <span>体重：</span>
                <span>{{userInfoData.weight}}kg</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="9">
                <span>出生日期：</span>
                <span>{{userInfoData.birthday}}</span>
              </el-col>
              <el-col :span="15">
                <span>腰围：</span>
                <span>{{userInfoData.waist}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="9">
                <span>联系电话：</span>
                <span>{{userInfoData.phone}}</span>
              </el-col>
              <el-col :span="15">
                <span>住址：</span>
                <span>{{userInfoData.address}}</span>
              </el-col>
            </el-row>

          </div>
        </div>
      </el-col>
    </el-row>
</template>

<script>
import userAvater from '../../components/user-avater'

export default{
  name: 'userDetailInfo',
  props: ['userInfoData'],
  components: {
    userAvater
  },
  data () {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/mixin.scss';
@import '../../scss/_variables.scss';
  .user-info{
    padding:20px 60px;
    text-align:center;
    @include flexRow();
    @include xlBorder();
    .user-info-left{
      // height:134px;
      width:30%;
      padding-right:60px;
      @include xlBorder();
      border-top-width:0;
      border-left-width:0;
      border-bottom-width:0;
      p{
        margin-bottom:10px;
        color: $fc7;
        font-size: 12px;
        line-height: 1.5;
      }
      .user-detail-avater{
        margin:10px 0;
      }
    }
    .user-info-right{
      width:80%;
      padding-left:60px;
      .el-row{
        text-align:left;
        border-bottom:1px solid $border-b2;
        &:first-child{
          padding: 2px 0 15px 0;
        }
        &:not(:first-child){
          line-height:50px;
        }
      }
      .el-col{
        span:first-child{
          color:$fc7;
        }
        span:last-child{
          color:$fc1;
        }
        span{
          font-size:14px;
        }
      }
    }
  }
</style>